import React from 'react'
import { Layout,Menu} from 'antd';
import {NavLink} from 'react-router-dom'
import {inject,observer} from "mobx-react";
import {AlignCenterOutlined,ZoomInOutlined,PieChartOutlined,AndroidOutlined,AimOutlined} from '@ant-design/icons'
const {Sider} = Layout
const {SubMenu} = Menu
const icon ={
    AlignCenterOutlined:(<AlignCenterOutlined/>),
    ZoomInOutlined:(<ZoomInOutlined/>),
    PieChartOutlined:(<PieChartOutlined/>),
    AndroidOutlined:(<AndroidOutlined/>),
    AimOutlined:(<AimOutlined/>),
}
@inject('userStore')
@observer
class PrivateLink extends React.Component {
    handleClick = e => {
        //console.log('click ', e);
        console.log(e.item.props.children[1].props.children)
    };
    navList = (list)=>{
        return list.map((item)=>{
            if(item.children){
                return <SubMenu key={item.path} title={<span>{icon[item.iconName]}{item.name}</span>}>
                            {this.navList(item.children)}
                       </SubMenu>
            }else {
                //console.log(item)
                return <Menu.Item key={item.path} onClick={this.handleClick}>
                            {icon[item.iconName]}
                            <NavLink key={item.path} to={item.path}>{item.name}</NavLink>
                        </Menu.Item>
            }

        })
    }
    render() {
        let navlist = this.props.userStore.userMessage.navUrl
        return (
            <Sider style={{width:'200px'}} className="site-layout-background">
                <Menu style={{height:'100%'}} mode='inline'>
                    {this.navList(navlist)}
                </Menu>
                {/*<Menu style={{height:'100%'}}>*/}
                {/*    <Menu.Item>*/}
                {/*        <NavLink to='/Main/Home'>首页</NavLink>*/}
                {/*    </Menu.Item>*/}
                {/*    <Menu.Item>*/}
                {/*        <NavLink to='/Main/About'>关于我们</NavLink>*/}
                {/*    </Menu.Item>*/}
                {/*    <Menu.Item>*/}
                {/*        <NavLink to='/Main/Events'>企业事件</NavLink>*/}
                {/*    </Menu.Item>*/}
                {/*    <Menu.Item>*/}
                {/*        <NavLink to='/Main/Product'>企业产品</NavLink>*/}
                {/*    </Menu.Item>*/}
                {/*    <Menu.Item>*/}
                {/*        <NavLink to='/Main/Contact'>联系我们</NavLink>*/}
                {/*    </Menu.Item>*/}
                {/*</Menu>*/}
            </Sider>
        )
    }
}

export default PrivateLink